@charset "UTF-8";
body {
    background: #0D1638;
    margin: 0;
}

/*图例*/
h1 {
    display: block;
    width: 100%;
    color: #fff;
    position: absolute;
    z-index: 999;
    text-align: center;
    letter-spacing: 10px;
    margin-top: 30px;
}
h4{
    display: block;
    width: 100%;
    color: #fff;
    position: absolute;
    z-index: 999;
    text-align: center;
    letter-spacing: 3px;
    margin-top: 90px;
}
.tip-box-shadow {
    width: 140px;
    height: 200px;
    background: #fff;
    position: absolute;
    bottom: 100px;
    right: 100px;
    z-index: 999;
    border-radius: 6px;
    opacity: .2;
}

.tip-box {
    width: 140px;
    height: 200px;
    position: absolute;
    bottom: 100px;
    right: 100px;
    z-index: 999;
}

.tip-box ul {
    padding: 0 20px;
}

.tip-box li {
    list-style: none;
    width: 100%;
    height: 30px;
    color: #fff;
    line-height: 30px;
    text-align: center;
}

.tip-box-tit {
    border-bottom: 1px solid #eee;
    color: #fff;
    margin-bottom: 10px;
}

.red-dot, .green-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background: red;
}

.green-dot {
    background: #a6c84c;
}

/*中心*/
.unit-center {
    width: 114px;
    height: 114px;
    display: inline-block;
    position: absolute;
    top: 428px;
    left: 50%;
    margin-left: -57px;
    background: #2664b8;
    border-radius: 100px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.unit-center > img {
    display: block;
    width: 50px;
    position: relative;
    top: 10px;
    left: 32px;
}

.cen-name {
    position: relative;
    top: 12px;
}

/*连接异常开始*/
.u-err {
    background: red !important;
}

.u-err > .move-dot {
    border: 2px solid red !important;
}

/*连接异常结束*/

/*线开始*/
.unit-line {
    height: 1px;
    position: absolute;
    top: 480px;
    left: 50%;
    margin-left: 60px;
}

.u-line {
    height: 1px;
    width: 200px;
    background: #a6c84c;
}

/*线旋转*/
.unit1 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -moz-transform: rotate(30deg); /* Firefox */
    -webkit-transform: rotate(30deg); /* Safari 和 Chrome */
}

.unit2 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(60deg);
    -ms-transform: rotate(60deg); /* IE 9 */
    -moz-transform: rotate(60deg); /* Firefox */
    -webkit-transform: rotate(60deg); /* Safari 和 Chrome */
}

.unit3 {
    width: 200px;
    transform-origin: -60px;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
}

.unit4 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(120deg);
    -ms-transform: rotate(120deg); /* IE 9 */
    -moz-transform: rotate(120deg); /* Firefox */
    -webkit-transform: rotate(120deg); /* Safari 和 Chrome */
}

.unit5 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(150deg);
    -ms-transform: rotate(150deg); /* IE 9 */
    -moz-transform: rotate(150deg); /* Firefox */
    -webkit-transform: rotate(150deg); /* Safari 和 Chrome */
}

.unit6 {
    width: 200px;
    transform-origin: -60px;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
}

.unit7 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(210deg);
    -ms-transform: rotate(210deg); /* IE 9 */
    -moz-transform: rotate(210deg); /* Firefox */
    -webkit-transform: rotate(210deg); /* Safari 和 Chrome */
}

.unit8 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(240deg);
    -ms-transform: rotate(240deg); /* IE 9 */
    -moz-transform: rotate(240deg); /* Firefox */
    -webkit-transform: rotate(240deg); /* Safari 和 Chrome */
}

.unit9 {
    width: 200px;
    transform-origin: -60px;
    transform: rotate(270deg);
    -ms-transform: rotate(270deg); /* IE 9 */
    -moz-transform: rotate(270deg); /* Firefox */
    -webkit-transform: rotate(270deg); /* Safari 和 Chrome */
}

.unit10 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(300deg);
    -ms-transform: rotate(300deg); /* IE 9 */
    -moz-transform: rotate(300deg); /* Firefox */
    -webkit-transform: rotate(300deg); /* Safari 和 Chrome */
}

.unit11 {
    width: 150px;
    transform-origin: -60px;
    transform: rotate(330deg);
    -ms-transform: rotate(330deg); /* IE 9 */
    -moz-transform: rotate(330deg); /* Firefox */
    -webkit-transform: rotate(330deg); /* Safari 和 Chrome */
}

.unit12 {
    transform-origin: -60px;
    transform: rotate(360deg);
    -ms-transform: rotate(360deg); /* IE 9 */
    -moz-transform: rotate(360deg); /* Firefox */
    -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
}

/*移动点开始*/
@-webkit-keyframes anim1 {

    0% {
        position: relative;
        top: -32px;
        left: 0;
    }

    100% {
        position: relative;
        top: -32px;
        left: 150px;
    }
}

@-webkit-keyframes anim2 {

    0% {
        position: relative;
        top: -32px;
        left: 0;
    }

    100% {
        position: relative;
        top: -32px;
        left: 100px;
    }
}

@-webkit-keyframes anim3 {

    0% {
        position: relative;
        top: -32px;
        left: 0;
    }

    100% {
        position: relative;
        top: -32px;
        left: 200px;
    }
}

.unit-line .move-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border: 2px solid #b6dc54;
    border-radius: 500px;
    background: #a6c84c;
    position: relative;
    top: 4px;
}

.unit1 > .move-dot,
.unit4 > .move-dot,
.unit7 > .move-dot,
.unit10 > .move-dot {
    -webkit-animation: anim1 2s linear infinite;
}

.unit2 > .move-dot,
.unit5 > .move-dot,
.unit8 > .move-dot,
.unit11 > .move-dot {
    -webkit-animation: anim2 2s linear infinite;
}

.unit3 > .move-dot,
.unit6 > .move-dot,
.unit9 > .move-dot,
.unit12 > .move-dot {
    -webkit-animation: anim3 2s linear infinite;
}

/*移动点结束*/

/*图片点开始*/
.top-dot {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50px;
    background: #2664b8;
    position: relative;
    text-align: center;
}

.unit1 > .top-dot,
.unit4 > .top-dot,
.unit7 > .top-dot,
.unit10 > .top-dot {
    top: -20px;
    left: 140px;
}

.unit2 > .top-dot,
.unit5 > .top-dot,
.unit8 > .top-dot,
.unit11 > .top-dot {
    top: -20px;
    left: 140px;
}

.unit3 > .top-dot,
.unit6 > .top-dot,
.unit9 > .top-dot,
.unit12 > .top-dot {
    top: -20px;
    left: 190px;
}

/*图片点中的图片*/
.top-dot > img {
    width: 30px;
    height: 30px;
    margin-top: 6px;
}

.unit1 img, .unit1 .dot-name {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg); /* IE 9 */
    -moz-transform: rotate(-30deg); /* Firefox */
    -webkit-transform: rotate(-30deg); /* Safari 和 Chrome */
}

.unit2 img, .unit2 .dot-name {
    transform: rotate(-60deg);
    -ms-transform: rotate(-60deg); /* IE 9 */
    -moz-transform: rotate(-60deg); /* Firefox */
    -webkit-transform: rotate(-60deg); /* Safari 和 Chrome */
}

.unit3 img, .unit3 .dot-name {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* IE 9 */
    -moz-transform: rotate(-90deg); /* Firefox */
    -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
}

.unit4 img, .unit4 .dot-name {
    transform: rotate(-120deg);
    -ms-transform: rotate(-120deg); /* IE 9 */
    -moz-transform: rotate(-120deg); /* Firefox */
    -webkit-transform: rotate(-120deg); /* Safari 和 Chrome */
}

.unit5 img, .unit5 .dot-name {
    transform: rotate(-150deg);
    -ms-transform: rotate(-150deg); /* IE 9 */
    -moz-transform: rotate(-150deg); /* Firefox */
    -webkit-transform: rotate(-150deg); /* Safari 和 Chrome */
}

.unit6 img, .unit6 .dot-name {
    transform: rotate(-180deg);
    -ms-transform: rotate(-180deg); /* IE 9 */
    -moz-transform: rotate(-180deg); /* Firefox */
    -webkit-transform: rotate(-180deg); /* Safari 和 Chrome */
}

.unit7 img, .unit7 .dot-name {
    transform: rotate(-210deg);
    -ms-transform: rotate(-210deg); /* IE 9 */
    -moz-transform: rotate(-210deg); /* Firefox */
    -webkit-transform: rotate(-210deg); /* Safari 和 Chrome */
}

.unit8 img, .unit8 .dot-name {
    transform: rotate(-240deg);
    -ms-transform: rotate(-240deg); /* IE 9 */
    -moz-transform: rotate(-240deg); /* Firefox */
    -webkit-transform: rotate(-240deg); /* Safari 和 Chrome */
}

.unit9 img, .unit9 .dot-name {
    transform: rotate(-270deg);
    -ms-transform: rotate(-270deg); /* IE 9 */
    -moz-transform: rotate(-270deg); /* Firefox */
    -webkit-transform: rotate(-270deg); /* Safari 和 Chrome */
}

.unit10 img, .unit10 .dot-name {
    transform: rotate(-300deg);
    -ms-transform: rotate(-300deg); /* IE 9 */
    -moz-transform: rotate(-300deg); /* Firefox */
    -webkit-transform: rotate(-300deg); /* Safari 和 Chrome */
}

.unit11 img, .unit11 .dot-name {
    transform: rotate(-330deg);
    -ms-transform: rotate(-330deg); /* IE 9 */
    -moz-transform: rotate(-330deg); /* Firefox */
    -webkit-transform: rotate(-330deg); /* Safari 和 Chrome */
}

.unit12 img, .unit12 .dot-name {
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg); /* IE 9 */
    -moz-transform: rotate(-360deg); /* Firefox */
    -webkit-transform: rotate(-360deg); /* Safari 和 Chrome */
}

/*图片点中的图片结束*/
/*图片点的名字开始*/
.dot-name {
    display: inline-block;
    width: 80px;
    height: 20px;
    color: #FFFFFF;
    position: relative;
}

.unit1 > .dot-name,
.unit4 > .dot-name,
.unit7 > .dot-name,
.unit10 > .dot-name {
    top: -40px;
    left: 140px;
}

.unit1 > .dot-name{
    top: -40px;
    left: 150px;
}
.unit4 > .dot-name{
    top: -50px;
    left: 116px;
}
.unit7 > .dot-name{
    top: -20px;
    left: 110px;
}
.unit10 > .dot-name {
    top: 0px;
    left: 145px;
}

.unit2 > .dot-name{
    top: -60px;
    left: 140px;
}
.unit5 > .dot-name{
    top: -50px;
    left: 115px;
}
.unit8 > .dot-name{
    top: -40px;
    left: 130px;
}
.unit11 > .dot-name {
    top: -20px;
    left: 150px;
}

.unit3 > .dot-name{
    top: -52px;
    left: 170px;
}
.unit6 > .dot-name{
    top: -30px;
    left: 155px;
}
.unit9 > .dot-name{
    top: -12px;
    left: 170px;
}
.unit12 > .dot-name {
    top: -30px;
    left: 178px;
    text-align: center;
}

/*图片点的名字结束*/
/*图片点结束*/